<template>
  <div class="delivery-list">
    <div class="filter-container main-content">
      <el-form
        :inline="true"
        :model="formInline"
        ref="formInline"
        class="demo-form-inline"
      >
        <el-row>
          <el-col :span="6">
            <el-form-item label="企业名称" prop="company">
              <el-input
                v-model="formInline.company"
                placeholder="请输入企业名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="收费类型" prop="type">
              <el-select v-model="formInline.type" placeholder="请选择收费类型">
                <el-option label="初审" value="preliminary"></el-option>
                <el-option label="监1" value="jdWord"></el-option>
                <el-option label="监2" value="dbWord"></el-option>
                <el-option label="在认证" value="stWord"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="收费金额" prop="amount">
              <el-input
                v-model="formInline.amount"
                placeholder="请输入收费金额"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="收费备注" prop="mark">
              <el-input
                v-model="formInline.mark"
                placeholder="请输入收费备注"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="应收费时间" prop="time">
              <el-date-picker
                v-model="formInline.time"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                size="small"
                @click="getContractList"
                >搜索</el-button
              >
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-download"
                size="small"
                @click="handleDownLoad"
                >批量导出</el-button
              >
            </el-form-item>
            <el-form-item>
              <el-button
                type="warning"
                icon="el-icon-delete"
                size="small"
                @click="handleReset"
                >重置</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="main-content delivery-table">
      <el-table border :data="tableData" style="width: 100%" max-height="400">
        <el-table-column prop="cid" label="合同编号" />
        <el-table-column prop="company" label="企业名称" />
        <el-table-column prop="higher" label="认证大分类" width="180">
          <template slot-scope="scope">{{
            highers[scope.row.higher]
          }}</template>
        </el-table-column>
        <el-table-column prop="lower" label="认证小分类" width="180">
          <template slot-scope="scope">{{ lowers[scope.row.lower] }}</template>
        </el-table-column>
        <el-table-column prop="type" label="收费类型">
          <template slot-scope="scope">{{ types[scope.row.type] }}</template>
        </el-table-column>
        <el-table-column prop="amount" label="收费金额" />
        <el-table-column prop="mark" label="合同备注" />
        <el-table-column prop="time" label="应收费时间" />
        <el-table-column prop="createdAt" label="创建时间" />
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="handleDeletePre(scope.row)"
              type="text"
              size="small"
              class="btn-delete"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="pageInfo.pageSize"
        :total="pageInfo.total"
        @current-change="handleChangeCurrent"
      />
    </div>
    <!-- 删除 -->
    <el-dialog title="提示" :visible.sync="visible" width="30%">
      <span>确认删除单号为{{ currentInfo.cid }}的合同吗?</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="visible = false">确 定</el-button>
      </span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="visible = false">取消</el-button>
          <el-button type="primary" @click="handleDelete"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {
  getContract,
  delContract,
  getContractDownload,
} from "../../api/contract";
import { highers, lowers, types } from "../../utils/utils";
import moment from "moment";
export default {
  name: "delivery-list",
  data() {
    return {
      formInline: {
        company: "",
        type: "",
        amount: "",
        mark: "",
        time: "",
      },
      tableData: [],
      pageInfo: {
        current: 1,
        pageSize: 10,
      },
      visible: false,
      currentInfo: {},
      highers,
      lowers,
      types,
    };
  },
  created() {
    this.getContractList();
  },
  methods: {
    async getContractList() {
      const { current, pageSize } = this.pageInfo;
      const res = await getContract({ ...this.formInline, current, pageSize });
      const { data, pageInfo } = res?.data;
      this.tableData = data?.map((x) => {
        return {
          ...x,
          time: moment(x.time).format("YYYY-MM-DD HH:mm"),
          createdAt: moment(x.createdAt).format("YYYY-MM-DD HH:mm"),
        };
      });
      this.pageInfo = pageInfo;
    },
    handleChangeCurrent(index) {
      this.pageInfo.current = index;
      this.getContractList();
    },
    handleReset() {
      this.$refs["formInline"].resetFields();
      this.getContractList();
    },
    handleDeletePre(info) {
      this.visible = true;
      this.currentInfo = info;
    },
    async handleDownLoad() {
      const res = await getContractDownload(this.formInline);
      // 使用Blob处理文件流
      const blob = new Blob([res.data]);
      // 通过a标签进行下载
      let downloadElement = document.createElement("a");
      let href = window.URL.createObjectURL(blob);
      downloadElement.href = href;
      downloadElement.download = "合同数据.xlsx";
      document.body.appendChild(downloadElement);
      downloadElement.click();
      document.body.removeChild(downloadElement);
      window.URL.revokeObjectURL(href);
    },
    async handleDelete() {
      if (!this.currentInfo.id) {
        this.$message({
          type: "warning",
          message: "无效操作",
        });
      }
      const res = await delContract({ id: this.currentInfo.id });
      if (res?.data?.code === 0) {
        this.visible = false;
        this.$message({
          type: "success",
          message: "删除成功",
        });
        this.getContractList();
      }
    },
  },
};
</script>

<style lang="less" scoped>
.filter-container {
  padding-bottom: 0;

  /deep/ .el-input {
    width: 200px;
  }

  /deep/ .el-form-item__label {
    margin-left: 20px;

    &:nth-child(1) {
      margin-left: 0;
    }
  }
}

.delivery-table {
  margin-top: 20px;
  /deep/ .el-pagination {
    margin-top: 20px;
    text-align: center;
  }
}
</style>
